<template>
  <div class="cart">
    <!-- 头部导航 -->
    <van-nav-bar
      :title="'购物车(' + num + ')'"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-empty description="购物车咱无内容" v-if="!cartList.length">
      <van-button
        round
        type="danger"
        @click="$router.push('/home')"
        class="bottom-button"
        >立即购物</van-button
      >
    </van-empty>
    <!-- 购物车数据列表 -->
    <div class="cartList">
      <van-swipe-cell v-for="item in cartList" :key="item.proid">
        <van-checkbox
          v-model="item.flag"
          @click="selecton(item)"
        ></van-checkbox>
        <van-card
          :price="item.originprice"
          desc="描述信息"
          :title="item.proname"
          class="goods-card"
          :thumb="item.img1"
        >
          <template #footer>
            <van-button size="mini" @click="subtract(item)">-</van-button>
            <span class="num">{{ item.num }}</span>
            <van-button size="mini" @click="add(item)">+</van-button>
          </template>
        </van-card>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            @click="removeList(item)"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
    </div>
    <!-- 推荐列表列表 -->
    <span class="ecommend">你可能还想要</span>
    <ul class="list">
      <li
        v-for="item in ecommendList"
        :key="item"
        v-show="item.img1"
        @click="$router.push(`/detail?id=${item.proid}`)"
      >
        <img :src="item.img1" :alt="item.proname" />
        <p>{{ item.proname }}</p>
        <span>￥{{ item.originprice }}</span>
      </li>
    </ul>

    <van-submit-bar :price="totalPrice" button-text="合计" @submit="onSubmit">
      <van-checkbox v-model="cartListAllIsCheckode" @click="changeCartAll"
        >全选</van-checkbox
      >
    </van-submit-bar>
  </div>
</template>

<script setup lang="ts">
import {
  getRecommendList,
  setCarListAll,
  getCarList,
  cartSelectone,
  operation,
  caretRemove,
} from "../server/cart";
import { ref, onMounted, computed } from "vue";
let ecommendList = ref([]);
let cartList = ref([]);
let num = ref(0);

// 获取购物车列表
function getList() {
  getCarList({ userid: localStorage.getItem("userid") }).then((res: any) => {
    if (res.code === "200") {
      cartList.value = res.data;
      num.value = res.data.length;
    }
  });
}
// 获取购物车数据
onMounted(() => {
  getRecommendList().then((res) => {
    ecommendList.value = res.data;
  });
  getList();
});
// 单挑数据选择状态
function selecton(item: any) {
  cartSelectone({ cartid: item.cartid, flag: item.flag }).then((res: any) => {
    if (res.code === "200") {
      getList();
    }
  });
}
// 减 按钮
function subtract(item: any) {
  if (item.num <= 1) return;
  item.num--;
  operation({ cartid: item.cartid, num: item.num }).then((res) => {
    getList();
  });
}
// 加按钮
function add(item: any) {
  item.num++;
  operation({ cartid: item.cartid, num: item.num }).then((res) => {
    getList();
  });
}
// 删除购物车数据
function removeList(item: any) {
  caretRemove({ cartid: item.cartid }).then((res) => {
    getList();
  });
}
// 是否全选
let cartListAllIsCheckode = computed({
  get() {
    return cartList.value.every((item: any) => item.flag);
  },
  set(v) {
    return cartList.value.forEach((item: any) => (item.flag = v));
  },
});
// 计算当前总金额
let totalPrice = computed(() => {
  return cartList.value.reduce((prev: any, item: any) => {
    return prev + (item.flag ? item.num * item.originprice * 100 : 0);
  }, 0);
});
// 全选按钮
function changeCartAll() {
  setCarListAll({
    userid: localStorage.getItem("userid"),
    type: cartListAllIsCheckode.value,
  }).then((res: any) => {
    if (res.code === "200") getList();
  });
}
// 合计
function onSubmit() {
  console.log("合计");
}
</script>

<style scoped>
.cart {
  padding-bottom: 3.125rem;
}
:deep(.van-swipe-cell__wrapper) {
  display: flex;
}
.van-card {
  flex: 1;
  background-color: rgb(255 255 255 /0) !important;
}
:deep(.van-card__footer) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
:deep(.van-card__footer > button) {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.25rem;
  line-height: 1;
  color: rgb(244, 177, 186);
  border-color: rgb(244, 177, 186);
  border-radius: 50%;
  margin: 0;
}
:deep(.van-card__footer > button:nth-of-type(2)) {
  background-color: red;
  color: #fff;
}
:deep(.van-card__footer > span) {
  width: 3.125rem;
  height: 100%;
  display: block;
  text-align: center;
  font-size: 1.25rem;
}

.bottom-button {
  width: 160px;
  height: 40px;
}
.list {
  border-radius: 0.9375rem;
  padding: 0 0.625rem;
  box-sizing: border-box;
  margin: 0.3125rem 0;
  display: flex;
  flex-wrap: wrap;
  background-color: rgb(246, 246, 246);
  justify-content: space-between;
}
.list > li {
  width: 45%;
  margin: 0.625rem 0.3125rem;
  border-radius: 0.9375rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.list > li > img {
  width: 100%;
  border-radius: 0.9375rem;
}
.list > li > p {
  font-size: 0.75rem;
  color: #666;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.list > li > span {
  color: red;
  text-align: center;
}
.ecommend {
  display: block;
  width: 100%;
  height: 1.875rem;
  font-size: 0.875rem;
  color: #666;
  text-align: center;
  line-height: 1.875rem;
  margin: 1.25rem 0;
}
.goods-card {
  margin: 0;
  background-color: white;
}
</style>
